<template>
	<div :id="id" :class="className" :style="{ height: height, width: width }" ></div>
</template>
<script type="text/javascript">
export default {
	props: {
		id: {
			type: String,
			default: 'chart'
		},
		className: {
			type: String,
			default: 'chart'
		},
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '100%'
		},
		option: {
			type: Object,
			require: true
		}
	},
	data() {
		return {
			chart: null
		}
	},
	mounted() {
		this.$nextTick(() => {
			setTimeout(() => {
				this.initChart()
				this.$nextTick(() => {
        var myEvent = new Event("resize"); // 创建一个支持冒泡且不能被取消的resize事件
        window.dispatchEvent(myEvent); // 事件可以在任何元素触发
      });
			}, 20)
		})

	},
	watch: {

	},
	components: {

	},
	methods: {
		initChart(){
			this.chart = this.$echarts.init(document.getElementById(this.id))
			this.chart.setOption(this.option)
			   //随着屏幕大小调节图表
			   window.addEventListener("resize", () => {
				this.chart.resize();
      });
	  this.$nextTick(() => {
        var myEvent = new Event("resize"); // 创建一个支持冒泡且不能被取消的resize事件
        window.dispatchEvent(myEvent); // 事件可以在任何元素触发
      });
			// this.$nextTick(() => {
			// 	if (this.option) {
			// 		this.chart.setOption(this.option)
			// 	}
			// })
		}
	}
}
</script>
<style type="text/css" lang="less">
.echartsWrap {
}
</style>